<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>设备维修管理员系统</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="admin/img/logo/icon.png">
    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/bootstrap.min.css">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/font-awesome.min.css">
    <!-- owl.carousel CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/owl.carousel.css">
    <link rel="stylesheet" href="admin/css/owl.theme.css">
    <link rel="stylesheet" href="admin/css/owl.transitions.css">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/animate.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/normalize.css">
    <!-- main CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/main.css">
    <!-- morrisjs CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/morrisjs/morris.css">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- metisMenu CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="admin/css/metisMenu/metisMenu-vertical.css">
    <!-- calendar CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="admin/css/calendar/fullcalendar.print.min.css">
    <!-- forms CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/form/all-type-forms.css">
    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/style.css">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" href="admin/css/responsive.css">
    <!-- modernizr JS
		============================================ -->
    <script src="admin/js/vendor/modernizr-2.8.3.min.js"></script>

<!--    <script  language ="javascript"  type ="text/javascript" >-->
<!--        setInterval("timer.innerHTML=new Date().toLocaleString()+'&nbsp;&nbsp;星期'+'日一二三四五六'.charAt(new Date().getDay());",1);-->
<!--    </script >-->
</head>

<!--<body  onload ="startTime()">-->
<body>
<button id="fullScreen" style="display: none;">全屏模式</button>

<div class="color-line"></div>

    <div class="container-fluid" style=" position:absolute; top:40px; left:550px; width: 300px ;height: 100px;">
        <div class="row">


            <div >
                <div class="hpanel">
                    <div class="panel-body text-center lock-inner">
                        <i class="fa fa-lock" aria-hidden="true"></i>
                        <br/>
                        <h4><a id ="timer"></a></h4>
                        <p>屏幕已锁定。 <br>主界面已关闭,您需要输入您的密码才能解锁屏幕。</p>
                        <form action="/unlock" class="m-t">
                            <div class="form-group">
                                <input type="hidden" th:value="${admin.getAId()}" name="AId" readonly="readonly">
                                <input type="password" required="" placeholder="请输入密码" name="APwd" id="APwd" class="form-control">
                            </div>
                            <button class="btn btn-primary block full-width" type="submit">
                                <a>解锁</a>
                            </button>
                        </form>
                        <p style="color:red;" th:text="${msg}?:' ' "></p>
                    </div>
                </div>
            </div>

        </div>

    </div>

        <script  language ="javascript"  type ="text/javascript" >
            setInterval("timer.innerHTML=new Date().toLocaleString()+'&nbsp;&nbsp;星期'+'日一二三四五六'.charAt(new Date().getDay());",1);
        </script >


    <script>


        // old code ahead...

        Math.TWO_PI = Math.PI * 2;

        var canvas,
            context,
            settings = {},
            bubbles = [],
            points = [],
            turbs = [],
            turbsIndex,
            turbulence;

        settings.turbulence = 125;

        // ========================================================================================
        // Bubble
        // ----------------------------------------------------------------------------------------

        function Bubble(options) {
            this.init(options);
        }

        Bubble.prototype = {

            init: function init(options) {

                if (!options) options = {};

                this.radius = Math.random() * 7;
                this.x = options.x || Math.random() * canvas.width;
                this.y = options.y || canvas.height + this.radius;
                this.vx = Math.random() * 0.03;
                this.vy = 1 + Math.random() * 4;
                this.sway = 0.25 + Math.random() * 0.25; // 0.25-0.5
                this.angle = Math.random() * Math.TWO_PI;
                this.opacity = 0.05 + Math.random() * 0.2;

                return this;
            },

            update: function update() {
                this.x += Math.cos(this.angle) * this.sway;
                this.y -= this.vy;
                this.angle += this.vx;
                if (this.y <= canvas.center.y) this.init();
                return this;
            },

            draw: function draw() {
                context.beginPath();
                context.arc(this.x, this.y, this.radius, 0, Math.TWO_PI, false);
                context.fillStyle = 'rgba(255,255,255,' + this.opacity + ')';
                context.fill();
                return this;
            },

            render: function render() {
                this.update();
                this.draw();
                return this;
            } };


        // ========================================================================================
        // Vertex
        // ----------------------------------------------------------------------------------------

        function Vertex(options) {
            this.x = options.x;
            this.y = options.y;
            this.vy = 0;
            this.target = 0;
            this.friction = 0.035;
            this.deceleration = 0.95;
        }

        Vertex.prototype.update = function (turb) {
            this.target = canvas.center.y + turb;
            this.vy *= this.deceleration;
            this.vy += this.target - this.y;
            this.y += this.vy * this.friction;
        };

        // ----------------------------------------------------------------------------------------

        function loop() {

            context.clearRect(0, 0, canvas.width, canvas.height);

            var i,d,length,dist = 15;

            for (i = 0, length = bubbles.length; i < length; i++) {
                bubbles[i].render();
            }

            // decrease turbulance and set to zero
            // if too small so it doesn't run continuously
            // update current turbulence value at turbsIndex

            turbulence -= turbulence * 0.85;
            if (Math.abs(turbulence) < 0.1) turbulence = 0;
            turbs[turbsIndex] = turbulence;

            // loop backwards through all points BEFORE turbsIndex
            // get the distance from the turbulance index and
            // if it's greater than the turbulance distance
            // set distance to max ripple distance
            for (i = turbsIndex - 1; i >= 0; i--) {
                d = turbsIndex - i;
                if (d > dist) d = dist;
                turbs[i] -= (turbs[i] - turbs[i + 1]) * (1 - 0.01 * d);
            }

            length = points.length;

            // loop forward through all points AFTER turbsIndex
            // and do the same thing as above
            for (i = turbsIndex; i < length; i++) {
                d = i - turbsIndex;
                if (d > dist) d = dist;
                turbs[i] -= (turbs[i] - turbs[i - 1]) * (1 - 0.01 * d);
            }

            // loop through ALL points and call update()
            // which updates targetY based on turbulence
            for (i = 0; i < length; i++) {
                points[i].update(turbs[i]);
            }

            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(points[0].x, points[0].y);

            for (i = 1; i < length; i++) {
                context.lineTo(points[i].x, points[i].y);
            }

            context.lineTo(canvas.width, 0);
            context.lineTo(0, 0);
            context.fillStyle = '#032445';
            context.fill();

            requestAnimationFrame(loop);
        }

        function resize() {

            var width = canvas.width = window.innerWidth,
                height = canvas.height = window.innerHeight,
                numPoints = Math.round(width * 0.15),
                point;

            turbulence = settings.turbulence * 5;

            canvas.center.x = width * 0.5;
            canvas.center.y = height * 0.5;
            points = [];

            for (var i = 0; i < numPoints + 1; i++) {

                points.push(new Vertex({
                    x: i / numPoints * width,
                    y: canvas.center.y }));


                // reset all turblence values
                turbs[i] = 0;
            }
        }

        function mousemove(event) {

            var mouseX = event.pageX,
                mouseY = event.pageY,
                numPoints;

            if (mouseY < canvas.center.y + 100 && mouseY > canvas.center.y - 100) {

                numPoints = points.length;
                turbulence = settings.turbulence;
                if (event.movementY < 0) turbulence *= -1;

                turbsIndex = 1 + Math.floor(mouseX * numPoints / canvas.width);
                turbs[turbsIndex] = turbulence;
            }
        }

        function init() {

            canvas = document.createElement('canvas');
            canvas.center = {};
            context = canvas.getContext('2d');

            resize();

            var numBubbles = Math.round(0.125 * canvas.width);
            turbsIndex = Math.round(numBubbles / 2);

            for (var i = 0; i < numBubbles; i++) {

                bubbles.push(new Bubble({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height }));

            }

            document.body.appendChild(canvas);
            document.body.style.cssText = 'margin:0;padding:0;overflow:hidden;background:#008aeb;background-image:radial-gradient(circle, #00b9ff, #0059da);';

            window.addEventListener('resize', resize);
            window.addEventListener('mousemove', mousemove);

            requestAnimationFrame(loop);
        }

        init();
    </script>

<script>
    window.history.pushState('forward', null, '#');
    window.history.forward(1);

    window.onpopstate = function() {
        alert("请输入密码返回上一页");
        window.history.pushState('forward', null, '#');
        window.history.forward(1);
        // window.location.reload();
    };

    window.history.pushState('forward', null, '#');
    window.history.forward(1);


</script>

<script>

    document.getElementById("fullScreen").addEventListener("click",function (ev) {
        debugger;
        var element = document.documentElement;
        if (element.requestFullscreen) {
            element.requestFullscreen();
        }
    });

    setInterval(function(){
        document.getElementById("fullScreen").click();
    }, 20);


</script>

    <!-- jquery
		============================================ -->
    <script src="admin/js/vendor/jquery-1.11.3.min.js"></script>
    <!-- bootstrap JS
		============================================ -->
    <script src="admin/js/bootstrap.min.js"></script>
    <!-- wow JS
		============================================ -->
    <script src="admin/js/wow.min.js"></script>
    <!-- price-slider JS
		============================================ -->
    <script src="admin/js/jquery-price-slider.js"></script>
    <!-- meanmenu JS
		============================================ -->
    <script src="admin/js/jquery.meanmenu.js"></script>
    <!-- owl.carousel JS
		============================================ -->
    <script src="admin/js/owl.carousel.min.js"></script>
    <!-- sticky JS
		============================================ -->
    <script src="admin/js/jquery.sticky.js"></script>
    <!-- scrollUp JS
		============================================ -->
    <script src="admin/js/jquery.scrollUp.min.js"></script>
    <!-- mCustomScrollbar JS
		============================================ -->
    <script src="admin/js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="admin/js/scrollbar/mCustomScrollbar-active.js"></script>
    <!-- metisMenu JS
		============================================ -->
    <script src="admin/js/metisMenu/metisMenu.min.js"></script>
    <script src="admin/js/metisMenu/metisMenu-active.js"></script>
    <!-- tab JS
		============================================ -->
    <script src="admin/js/tab.js"></script>
    <!-- icheck JS
		============================================ -->
    <script src="admin/js/icheck/icheck.min.js"></script>
    <script src="admin/js/icheck/icheck-active.js"></script>
    <!-- plugins JS
		============================================ -->
    <script src="admin/js/plugins.js"></script>
    <!-- main JS
		============================================ -->
    <script src="admin/js/main.js"></script>
</body>

</html>